<template>
  <div class="inner" style="background: #fff">
    <el-container>
      <el-header height="84px" class="p0">
        <VHeader />
      </el-header>
      <el-container>
        <el-aside width="300px">
          <VNav />
        </el-aside>
        <el-main class="rel" style="padding: 0">
          <el-link :underline="false" class="tab-clear-all" title="关闭所有标签页" @click="clearAllTabs">
            <el-icon><ElIconCircleClose /></el-icon>
          </el-link>

          <el-tabs v-show="tabPages.length" class="tab-box" v-model="tabValue" :closable="closable" type="card" @tab-remove="tabRemove" @tab-click="tabClick">
            <el-tab-pane v-for="item in tabPages" :key="item.component" :label="item.title" :name="item.component">
              <div class="bg-white" :style="`height:${height - 140}px; overflow: hidden auto;`">
                <LoadPage :component-info="item" />
              </div>
            </el-tab-pane>
          </el-tabs>

          <div class="water-wall">
            <div v-for="(_, index) in cols * rows" :key="index">
              <div>{{ userInfo.account || "获取用户信息失败" }}</div>
              <div class="mt5">{{ now }}</div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import { useAppStore } from "@/store/modules/app";
import { useIntervalFn } from "@vueuse/core";
import VHeader from "@/layout/header/Header.vue";
import VNav from "@/layout/nav/Nav.vue";
import LoadPage from "@/components/load-page/LoadPage.vue";
import dayjs from "dayjs";

const appStore = useAppStore();

const { windowHeight, windowWidth, tabPages, tabValue, closable, userInfo } = storeToRefs(appStore);

const cols = computed(() => Math.round((windowWidth.value - 190) / 230));
const rows = computed(() => Math.round((windowHeight.value - 48) / 160));
const height = computed(() => windowHeight.value);

const now = dayjs().format("YYYY-MM-DD HH:mm:ss");

// 关闭所有标签
function clearAllTabs() {
  appStore.setTabPages([]);
  appStore.setClosable(false);
}

// 移除tab
function tabRemove(name) {
  appStore.removeTabPages(name);
}

// tab点击
function tabClick(tab) {
  appStore.setTabValue(tab.props.name);
}
</script>

<style scoped>
/* 样式保持原有的 */
</style>
